<template>
  <div>
    <card _Title="提现设置" />
    <!-- <Steps :current="current">
      <Step title="提现账户"></Step>
      <Step title="验证手机号"></Step>
      <Step title="提交审核"></Step>
    </Steps> -->
    <!-- <div class="content"> -->
      <Form ref="formRegis" :model="formRegis" :label-width="110" :rules="ruleInline" style="width: 350px">
        <!-- <div v-if="current == 0"> -->
          <FormItem prop="accountType" label="收款方式">
          <!-- prefix="logo-usd"  -->
          <Select v-model="formRegis.accountType" @on-change="clickTypeFun" placeholder="请选择收款方式">
            <Option value="微信">微信</Option>
            <Option value="支付宝">支付宝</Option>
            <Option value="银行卡">银行卡</Option>
          </Select>
        </FormItem>
          <FormItem prop="accountName" label="账户名称">
            <i-input type="text" v-model="formRegis.accountName" clearable placeholder="请输入提现账户名称" />
          </FormItem>
          <FormItem prop="accountNumber" label="提现账户号码">
            <i-input type="text" v-model="formRegis.accountNumber" clearable placeholder="请输入提现账户号码" />
          </FormItem>
          <FormItem prop="money" label="提现金额">
            <i-input type="text" v-model="formRegis.money" clearable placeholder="请输入提现金额"></i-input>
          </FormItem>
        <!-- </div>
        <div v-if="current == 1"> -->
          <FormItem prop="phone" label="手机号">
            <i-input type="text" v-model="formRegis.phone" disabled clearable placeholder="请输入手机号" />
          </FormItem>
          <FormItem prop="code" label="验证码">
            <i-input type="text" v-model="formRegis.code" clearable placeholder="手机验证码">
              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
            </i-input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="submitCode">提交</Button>
          </FormItem>
        <!-- </div> -->
      </Form>
    <!-- </div> -->
    <!-- <div class="content" v-if="current == 2">提交审核中</div> -->
  </div>
</template>

<script>
import card from "@/components/card";
import { sendSMSTixian,applyTixian } from "@/api/writer/index";
import storage from '@/plugins/storage.js';


export default {
  name: "AddAddress",
  data() {
    return {
      current: 0,
      formRegis: {
        phone: null,
        code: null,
      },
      ruleInline: {
        code: [{ required: true, message: "请输入手机验证码", trigger: ['change','blur'] }],
        accountName: [{ required: true, message: "请输入提现账户名称", trigger: 'blur' }],
        accountType: [{ required: true, message: "请选择收款方式", trigger: 'blur' }],
        accountNumber: [{ required: true, message: "请输入提现账户号码", trigger: 'blur' }],
        money: [{ required: true, message: "请输入提现金额", trigger: 'blur' },
        {
          pattern: /^\d+(\.\d{1,2})?$/,
          message: '请输入整数或两位小数',
          trigger: 'change'
        }],
      },
      codeMsg: "发送验证码", // 提示文字
      interval: "", // 定时器
      time: 60, // 倒计时
    };
  },
  methods: {
    next() {
      this.current += 1;
    },
    // 发送短信验证码
    sendCode() {
      if (this.time === 60) {
        if (this.formRegis.phone === "") {
          this.$Message.warning("请先填写手机号");
          return;
        }
        let params = {
          phone: this.formRegis.phone,
          // verificationEnums: "REGISTER",
        };
        sendSMSTixian(params).then((res) => {
          if (res.code == 200) {
            this.$Message.success("验证码发送成功");
            this.formRegis.code = res.data +'';
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
              if (that.time === 0) {
                that.time = 60;
                that.codeMsg = "重新发送";
                clearInterval(that.interval);
              } else {
                that.codeMsg = that.time;
              }
            }, 1000);
          } else {
            this.$Message.warning(res.msg);
          }
        });
      }
    },
    //下拉切换
    clickTypeFun(val) {},
    submitCode() {
      console.log(1111111, this.formRegis);
      this.$refs.formRegis.validate((valid) => {
        if (valid) {
          // this.next();
          applyTixian(this.formRegis).then((res) => {
            if (res.code == 200) {
              this.$Message.success("提交成功");
              this.$router.go(0); 
            } 
          })
        } else {
          this.$Message.warning("请输入正确的表单信息");
        }
      });
    }
  },
  mounted() {
    let userInfo = JSON.parse(storage.getItem('userInfo'))
    this.formRegis.phone = userInfo.phone
    console.log(this.formRegis, 'this.formItem');
  },
  components: {
    card,
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style>